<template>
  <div class="flex flex-col h-full">
    <div class="flex bg-[--autata-bg-color] p-[16px] rounded-[2px]">
      <div
        v-for="item in TAB_LIST"
        :key="item.key"
        :class="[
          'tab-wrap flex items-center mr-[16px]',
          item.img ? 'justify-between pl-[24px]' : 'justify-center',
          active === item.key ? 'active' : ''
        ]"
        @click="active = item.key"
      >
        <div class="text-[--autata-font-color] font-bold text-[20px] name">
          {{ t(item.name) }}
        </div>
        <div v-if="item.img" class="h-full flex items-end">
          <img :src="item.img" alt="" />
        </div>
      </div>
    </div>

    <div class="flex-grow mt-4">
      <AllDevice v-show="active === 1" :active="active" />
      <Cabinet v-show="active === 2" :active="active" />
      <TeaInfuser v-show="active === 3" :active="active" />
      <TeaPowder v-show="active === 4" :active="active" />
    </div>
  </div>
</template>

<script setup lang="ts">
import TabAllImg from "@/assets/dashboard/tab_all.png";
import TabTeaImg from "@/assets/dashboard/tab_tea.png";
import { ref } from "vue";
import AllDevice from "./components/AllDevice.vue";
import TeaInfuser from "./components/TeaInfuser.vue";
import TeaPowder from "./components/TeaPowder.vue";
import Cabinet from "./components/Cabinet.vue";
import { useI18n } from "vue-i18n";

const { t } = useI18n();

const TAB_LIST = [
  {
    key: 1,
    name: "tea_infuser.dashboard.general_data"
    // img: TabAllImg
  },
  {
    key: 2,
    name: "tea_infuser.dashboard.cabinet_machine",
    img: TabAllImg
  },
  {
    key: 3,
    name: "tea_infuser.dashboard.tea_maker",
    img: TabTeaImg
  },
  {
    key: 4,
    name: "tea_infuser.dashboard.tea_powder_str",
    img: TabTeaImg
  }
];
const active = ref(1);
</script>

<style scoped lang="scss">
.tab-wrap {
  width: 180px;
  height: 100px;
  cursor: pointer;
  background: var(--autata-striped-bg-color);
  border: 1px solid transparent;
  border-radius: 4px;
  transition: all 0.3s ease-in-out;

  &:hover {
    border-color: var(--el-color-primary);

    .name {
      color: var(--el-color-primary);
    }
  }

  &.active {
    border-color: var(--el-color-primary);

    .name {
      color: var(--el-color-primary);
    }
  }
}
</style>
